<!-- 装修用户组件：用户卡券 -->
<template>
	<view class="ss-coupon-menu-wrap ss-flex ss-col-center">
		<view class="left">
			<count-to class="center-number ss-m-r-20 font-DIN" :startVal="0" :endVal="sheep.$store('user').otherData.inviteNum" :decimals="0" :duration="3000"></count-to>
			<view class="center-text ss-m-r-20 font-PingFangRegular">
				累计邀请
			</view>
		</view>
		<view class="center">
			<count-to class="center-number ss-m-r-20 font-DIN" :startVal="0" :endVal="sheep.$store('user').otherData.obtainLsNum" :decimals="4" :duration="3000"></count-to>
			<view class="center-text ss-m-r-20 font-PingFangRegular">
				累计奖励灵石
			</view>
		</view>
		<view class="right font-PingFangBold" @tap="sheep.$router.go('/pages/user/invite/invite')">
			邀请好友
		</view>
		<!-- <view class="menu-item ss-flex-col ss-row-center ss-col-center" v-for="item in props.list" :key="item.title"
			@tap="sheep.$router.go(item.path, { type: item.type })"
			:class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'">
			<image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit"></image>
			<view class="menu-title ss-m-t-28">{{ item.title }}</view>
		</view> -->
	</view>
</template>

<script setup>
	/**
	 * 装修组件 - 优惠券菜单
	 */
	import { onMounted } from 'vue';
	import sheep from '@/sheep';
	import { CountTo } from 'vue3-count-to';
	import inviteApi from '@/sheep/api/member/invite';
	onMounted(async () => {
		//获取基础信息
		const { data } = await inviteApi.getInvitation()
		sheep.$store('user').otherData.inviteNum = data.invitedFriends;
		sheep.$store('user').otherData.obtainLsNum = data.totalSpiritStones;
		sheep.$store('user').otherData.todaySpiritStones = data.todaySpiritStones;
		sheep.$store('user').otherData.totalCommission = data.totalCommission;
	})
	
	// 接收参数
	const props = defineProps({
		list: {
			type: Array,
			default () {
				return [{
						title: '已领取',
						value: '0',
						icon: '/static/img/shop/order/nouse_coupon.png',
						path: '/pages/coupon/list',
						type: 'geted',
					},
					{
						title: '已使用',
						value: '0',
						icon: '/static/img/shop/order/useend_coupon.png',
						path: '/pages/coupon/list',
						type: 'used',
					},
					{
						title: '已失效',
						value: '0',
						icon: '/static/img/shop/order/out_coupon.png',
						path: '/pages/coupon/list',
						type: 'expired',
					},
					{
					  title: '领券中心',
					  value: '0',
					  icon: '/static/img/shop/order/all_coupon.png',
					  path: '/pages/coupon/list',
					  type: 'all',
					},
				];
			},
		},
	});
</script>

<style lang="scss" scoped>
	.ss-coupon-menu-wrap {
		height: 134rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		.left{
			width: 200rpx;
			flex-shrink: 0;
			.center-number{
				width: 120rpx;
				height: 34rpx;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.center-text{
				margin-top: 6rpx;
				white-space: nowrap;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.center{
			width: 200rpx;
			flex-shrink: 0;
			.center-number{
				width: 150rpx;
				height: 34rpx;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.center-text{
				margin-top: 6rpx;
				white-space: nowrap;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.right{
			width: 192rpx;
			height: 70rpx;
			background: #5350F1;
			box-shadow: inset -2rpx 2rpx 2rpx 0rpx #7B78FF, inset 2rpx -2rpx 0rpx 0rpx rgba(0,0,0,0.25);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			white-space: nowrap;
		}
		.menu-item {
			height: 160rpx;

			.menu-title {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #333333;
			}

			.item-icon {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.menu-wallet {
			width: 144rpx;
		}
	}
</style>